<template>
    <div class="growth-value-detail-main">
        <Dialog :app-dialog="appDialog">
            <div>
                <ZwSearchForm :option="searchOption" @search="search" @reset="reset" />
                <ZwTable
                    ref="tableRef"
                    class="table-box"
                    :option="tableOption"
                    :row-key="getRowKey"
                    :param-prop="state.paramProp"
                    :fetch-params="state.searchParams"
                    :fetch-api="fetchApi()">
                </ZwTable>
            </div>
        </Dialog>
    </div>
</template>
<script setup lang="tsx">
import { ref, reactive, computed } from 'vue';
import { deepCopy } from '@/utils/helper';
import { ElMessage, ElButton } from 'element-plus';
import { getGrowthList, getMemberChannelList } from '@/api/member/memberList/index';
import Dialog from '@/components/Dialog.vue';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import ZwTable from '@/components/zw/table/Table';
import { getWiseManList } from '@/api/ecommerce/wiseManList';

const tableRef = ref<any>(null);

const submitHandel = () => {
    appDialog.visible = false;
};

const appDialog = reactive<any>({
    visible: false,
    title: '成长值明细',
    width: '60%',
    submit: submitHandel,
    submitText: '关闭'
});

const searchOption = computed(() => {
    return [
        {
            label: '',
            name: 'change_type',
            type: 'select',
            clearable: true,
            placeholder: '请选择原因',
            optionList: [
                { value: 0, label: '全部' },
                { value: 1, label: '购买商品' },
                { value: 2, label: '商品退款' },
                { value: 3, label: '浏览商品' },
                { value: 4, label: '分享商品' }
            ]
        },
        {
            label: '',
            name: 'channel_id',
            type: 'select',
            clearable: true,
            placeholder: '请选择来源渠道',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    getMemberChannelList().then((res: any) => {
                        let list: any = [];
                        list = res || [];
                        resolve(list);
                    });
                });
            },
            formatOption: (v: any) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '',
            name: 'shop_id',
            type: 'select',
            clearable: true,
            isStoreSelect: true,
            popperClass: 'zw-hide_select_option',
            placeholder: '请选择来源店铺'
        },
        {
            label: '',
            name: 'daren_openid',
            value: '',
            type: 'select',
            clearable: true,
            placeholder: '请选择达人',
            fetchOptionApi: () => {
                return new Promise(resolve => {
                    getWiseManList({ auth_status: [2, 3], page: 1, page_size: 999 }).then((res: any) => {
                        const targetArr: any = [];
                        res?.data?.forEach((item: any) => {
                            targetArr.push(item);
                        });
                        resolve(targetArr);
                    });
                });
            },
            formatOption: (v: any) => ({
                label: v.daren_name,
                value: v.daren_openid
            })
        },
        {
            label: '',
            name: 'record_time',
            value: [],
            type: 'datePicker',
            datePickerType: 'daterange',
            datePickerFormat: 'YYYY-MM-DD HH:mm:ss',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期'
        }
    ];
});

const tableOption = [
    {
        prop: 'change_val',
        label: '变动值',
        render({ row }: object) {
            return (
                <div>
                    <span v-show={row.change_val}>{row.change_type == 1 ? '+' : '-'}</span>
                    {Math.abs(row.change_val)}
                </div>
            );
        }
    },
    {
        prop: 'business_type_name',
        label: '类型'
    },
    {
        prop: 'business_sub_name',
        label: '名称'
    },
    {
        prop: 'channel_name',
        label: '来源渠道'
    },
    {
        prop: 'shop_name',
        label: '来源店铺/达人',
        render({ row, column, index }: any) {
            const isShop = row.source_type == 1;
            const src = `/static/member/${isShop ? 'shop' : 'member'}-icon-small.png`;
            const name = isShop ? row.shop_name : row.daren_name;
            return (
                <div style="display: flex;align-items:center;">
                    <el-image
                        style="display: inline-block;width: 16px; height: 16px;margin-right: 4px;"
                        v-show={name && name !== '--'}
                        src={src}></el-image>
                    {name || '--'}
                </div>
            );
        }
    },
    {
        prop: 'remark',
        label: '备注',
        render({ row, column, index }: any) {
            return <div>{row.remark ? row.remark : '--'}</div>;
        }
    },
    {
        prop: 'updated_at',
        label: '变动时间'
    }
];

const defaultParams = {
    member_no: '',
    change_type: '',
    channel_id: '',
    shop_id: '',
    created_at: []
};

const state = reactive({
    searchParams: deepCopy(defaultParams),
    paramProp: { page: 'page', pageSize: 'page_size' }
});

const getRowKey = (row: any) => {
    return row.id;
};

const search = (data: any) => {
    const member_no = state.searchParams.member_no;
    tableRef.value.getTable().clearSelection();
    state.searchParams = deepCopy({ ...defaultParams, ...data, member_no });
};

const reset = () => {
    const member_no = state.searchParams.member_no;
    tableRef.value?.getTable()?.clearSelection();
    state.searchParams = deepCopy({ ...defaultParams, member_no });
};

const fetchApi = () => {
    return getGrowthList;
};

defineExpose({
    appDialog,
    state,
    reset
});
</script>
<style lang="scss" scoped>
.growth-value-detail-main {
}
</style>
